<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="org.gnomus.server.C" %>
<%
  Context ctx = Context.get();
  Map item = (Map) ctx.data.get("item");
  List<Map> activity_list = (List<Map>) item.get("activity");
  Map activity = (activity_list != null && activity_list.size() > 0 ? activity_list.get(0) : null);
  String subtype = activity == null ? null : (String) activity.get("subtype");
  if (subtype == null) {
    subtype = "atom";
  }
%>
<script type="text/javascript">
  $(document).ready(function() {
    Construct.play(<%= new Gson().toJson(activity) %>);
  });
</script>
<p class="large">
  Activity (construct <%= C.CONSTRUCT_SUBTYPES.get(subtype).toLowerCase() %>)
  <a class="normal" style="padding-left: 32px;" href="/activity/edit?id=<%= activity.get("id") %>">
    edit
  </a>
  <a class="normal" style="padding-left: 32px;" onclick="Construct.score()">
    score input
  </a>
  <a class="normal" style="padding-left: 32px;" onclick="Construct.reset();">
    reset activity
  </a>
</p>
<div id="play_construct">
  <%
    if ("atom".equals(subtype)) {
  %>
  <table style="width:100%;">
    <tr>
      <td>
        <canvas id="construct_atom" width="400" height="400"
                ondragover="dnd.over(event)" ondrop="dnd.drop(event)"></canvas>
      </td>
      <td>
        <p class="large a-center" Nuclei and Electrons>
          Nuclei and Electrons
        </p>
        <div>
          <%
            for (int i = 0; i < 8; i++) {
              if (i < 5) {
          %>
          <canvas id="nucleus_<%= i %>" width="160" height="160"
                  class="nucleus" draggable="true" data-value="<%= i %>"
                  ondragstart="dnd.start(event)" ondrag="dnd.drag(event)"
                  ondragend="dnd.dragEnd(event)"></canvas>
          <%
              } else {
          %>
          <canvas id="electrons_<%= i %>" width="160" height="160"
                  class="electrons" draggable="true" data-value="<%= Math.pow(2, i - 5) %>"
                  ondragstart="dnd.start(event)" ondrag="dnd.drag(event)"
                  ondragend="dnd.dragEnd(event)"></canvas>
          <%
              }
            }
          %>
        </div>
      </td>
    </tr>
  </table>
  <%
    } else if ("molecule".equals(subtype)) {
  %>
  <table class="unselectable" style="width:900px;">
    <tr>
      <%
        for (int i = 0; i < 8; i++) {
          if (i == 1) {
      %>
      <td colspan="2">
        <div class="a-center">
          <canvas id="construct_molecule" width="400" height="320"
                  ondragover="dnd.over(event)" ondrop="dnd.drop(event)"></canvas>
        </div>
      </td>
      <%
          } else if (i != 2) {
      %>
      <td>
        <div class="a-center">
          <canvas id="atom_<%= i %>"
                  class="atom" width="200" height="200" draggable="true"
                  ondragstart="dnd.start(event)" ondrag="dnd.drag(event)"
                  ondragend="dnd.dragEnd(event)" data-value="<%= i %>"></canvas>
        </div>
      </td>
      <%
        }
        if (i == 3) {
      %>
    </tr>
    <tr>
    <%
          }
      }
    %>
    </tr>
  </table>
  <%
  } else if ("reaction".equals(subtype)) {
  %>
  Not implemented yet.
  <%
  }
  %>
</div>